<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/page01.css">

</head>
<body class="rank_page">

<div id="rankBox" class="">
  <!--排名-->
  <div class="top_box fix">
    <div class="top_item l">
      <div class="title">2021年世界 <span style="color: #f7f40a">500</span> 强</div>
      <div class="value" id="worldRank">50</div>

    </div>
    <div class="top_item l">
      <div class="title">中国企业 <span style="color: #f7f40a">500</span> 强</div>
      <div class="value" id="companyRank">30</div>
    </div>
    <div class="top_item l">
      <div class="title" >中国制造业 <span style="color: #f7f40a">500</span> 强</div>
      <div class="value" id="makeRank">20</div>
    </div>
  </div>
  <!--图表-->
  <div class="charts_box">
    <div class="charts_tab fix">
      <div class="tab_item l on">酸</div>
      <div class="tab_item l">钾</div>
      <div class="tab_item l">钙</div>
    </div>
    <div class="tab_content swiper-container">
      <div class="swiper-wrapper">
        <div class="content_item swiper-slide" id="chart1"></div>
        <div class="content_item swiper-slide" id="chart2"></div>
        <div class="content_item swiper-slide" id="chart3"></div>
      </div>
    </div>
  </div>
  <!--产量-->
  <div class="output_box fix">
    <div class="output_item l">
      <div class="item_name">酸</div>
      <div class="item_value"> <span id="nieValue">0</span><span class="item_unit"></span></div>
    </div>
    <div class="output_item l">
      <div class="item_name">钾</div>
      <div class="item_value"><span id="tongValue">0</span><span class="item_unit"></span></div>
    </div>
    <div class="output_item l">
      <div class="item_name">钙</div>
      <div class="item_value"><span id="guValue">0</span><span class="item_unit"></span></div>
    </div>
    <div class="output_item l">
      <div class="item_name">铵</div>
      <div class="item_value"><span id="boValue">0</span><span class="item_unit"></span></div>
    </div>
  </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/echarts.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
$(function (){
  let mySwiper;
  $('.charts_box .content_item').eq(0).fadeIn()
  //图表选项卡点击事件
  $('body').on('click','.charts_box .tab_item',function () {
    let index = $(this).index();
    $(this).addClass('on').siblings().removeClass('on');
    // $('.charts_box .content_item').css('display','none');
    // $('.charts_box .content_item').eq(index).fadeIn();
    mySwiper.slideTo($(this).index())
  })

  // getRankData();
  getChartsData();

  /*获取排名数据*/
  function getRankData() {
    getJson('api/WEB-SQL/websql/openInterface/qyzl?categoryNo=HYPM&limit=1',{},function (res) {
      if(res.code == 200){
        $('#worldRank').text(res.data[0].worldRanking || 0);
        $('#companyRank').text(res.data[0].chinaRanking || 0);
        $('#makeRank').text(res.data[0].manuRanking || 0);
      }
    })
  }

  let nieUnit,tongUnit,guUnit;
  /*获取图表数据*/
  function getChartsData() {
    getJson('qyzl_clzs.json',{},function (res) {
      if(res.code == 200){
        const nieArr = res.data.filter((item)=>{
          if(item.metalCategory == '100101'){
            nieUnit = item.metalCompanyName
          }
          return item.metalCategory == '100101'
        });
        const tongArr = res.data.filter((item)=>{
          if(item.metalCategory == '100101'){
            tongUnit = item.metalCompanyName
          }
          return item.metalCategory == '100102'
        });
        const guArr = res.data.filter((item)=>{
          if(item.metalCategory == '100101'){
            guUnit = item.metalCompanyName
          }
          return item.metalCategory == '100103'
        });
        const boArr = res.data.filter((item)=>{
          return item.metalCategory == '100104'
        });

        nieArr.sort((a, b)=>{return a.entryYear - b.entryYear});
        tongArr.sort((a, b)=>{return a.entryYear - b.entryYear});
        guArr.sort((a, b)=>{return a.entryYear - b.entryYear});
        boArr.sort((a, b)=>{return a.entryYear - b.entryYear});

        //产量
        $('.output_item #nieValue').html(nieArr[nieArr.length-1].yield || 0);
        $('.output_item #tongValue').html(tongArr[tongArr.length-1].yield || 0);
        $('.output_item #guValue').html(guArr[guArr.length-1].yield || 0);
        $('.output_item #boValue').html(boArr[boArr.length-1].yield || 0);

        $('.output_item #nieValue + .item_unit').html(nieArr[nieArr.length-1].metalCompanyName);
        $('.output_item #tongValue + .item_unit').html(tongArr[tongArr.length-1].metalCompanyName);
        $('.output_item #guValue + .item_unit').html(guArr[guArr.length-1].metalCompanyName);
        $('.output_item #boValue + .item_unit').html(boArr[boArr.length-1].metalCompanyName);

        const nieChartData = {
          xData: nieArr.map((item)=>{return item.entryYear}),
          yData: nieArr.map((item)=>{return item.yield})
        };
        const tongChartData = {
          xData: tongArr.map((item)=>{return item.entryYear}),
          yData: tongArr.map((item)=>{return item.yield})
        };
        const guChartData = {
          xData: guArr.map((item)=>{return item.entryYear}),
          yData: guArr.map((item)=>{return item.yield})
        };

        drawLine('chart1',nieChartData,nieUnit);
        drawLine('chart2',tongChartData,tongUnit);
        drawLine('chart3',guChartData,guUnit);

        mySwiper = new Swiper ('.swiper-container', {
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          // loop: true, // 循环模式选项
          on: {
            slideChangeTransitionStart: function () {
              // alert(this.activeIndex);
              $('.charts_tab .tab_item').eq(this.activeIndex).addClass('on').siblings().removeClass('on');
            },
          }
        })
      }
    })
  }

  /**
   * 绘制折线图
   * @param id dom的ID
   * @param data 数据 格式为｛xData:[],yData:[]｝
   */
  function drawLine(id, data,unit) {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        formatter: '{b0}: {c0}'+unit,
        backgroundColor:'rgba(0,0,0,.7)',
        borderColor:'rgba(0,0,0,0)',
        textStyle:{
          color:'#fff'
        }
      },
      xAxis: {
        type: 'category',
        data: data.xData,
        axisLabel:{
          show: true,
          color: '#4ce5ff'
        },
      },
      yAxis: {
        type: 'value',
        name: unit,
        nameTextStyle:{
          color: '#4ce5ff',
          fontSize: 12,
        },
        axisLine:{
          show: true,

        },
        axisLabel:{
          show: true,
          color: '#4ce5ff'
        },
        splitLine:{
          show: true,
          lineStyle: {
            color: '#0a3b75'
          }

        }
      },
      series: [
        {
          data: data.yData,
          type: 'line',
          lineStyle: {
            color:'#f7f40a'
          },
          itemStyle:{
            color:'#f7f40a',
            borderColor:'#e84700',
            borderWidth: 4
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }



})
</script>
</html>
